<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page  sdf</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="static/css/application.css" rel="stylesheet" />
	<link href="static/css/border-anim-h.gif" rel="stylesheet" />
	<link href="static/css/border-anim-h.gif" rel="stylesheet" />
	<link href="static/css/border-h.gif" rel="stylesheet" />
	<link href="static/css/border-v.gif" rel="stylesheet" />
	<link href="static/css/imgareaselect-animated.css" rel="stylesheet" />
	<link href="static/css/imgareaselect-default.css" rel="stylesheet" />
	<link href="static/css/imgareaselect-deprecated.css" rel="stylesheet" />
	<script src="static/js/application.js" type="text/javascript"></script>
	<script src="static/js/jquery.imgareaselect.min.js" type="text/javascript"></script>
	<script src="static/js/jquery.imgareaselect.pack.js" type="text/javascript"></script>
	<script src="static/js/jquery-1.11.0.js" type="text/javascript"></script>
	<script src="static/js/jquery-1.4.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
		/* $("#aa").click(function(){alert('测试成功');}); 
		$("#sss").hover(function(){  
            $("#mark-info").show();  
        },function(){  
            $("#mark-info").hide();  
        }); 
		
		*/
		$("#t1").hover(function () { 
			
			var objDiv = $("#mydiv3"); 
			$(objDiv).show();
		
			$(objDiv).css("left", event.clientX); 
			$(objDiv).css("top", event.clientY + 10); 
			},function () { 
			var objDiv = $("#mydiv3");
			$(objDiv).css("display", "none"); 
		});
	
		$("#http").click(function(){
			
			
			
			
			
			
			
			
		});
		
	});	
	
	
	
	</script>
  </head>
  
  <body>
    This is my JSP page. <br>
    <button id="aa">aa</button>
    
    
   <button id="http">http</button>
    

<a id="t1" style="cursor:pointer">?</a> 
<br/><br/><br/>




<label id="mydiv3" title="xuanfu" style="position:absolute;display:none;border:1px solid silver;background:red;" >qqq</label>
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:red;"> 
	aaa
	</div>
	<select multiple="multiple">  
<option value='' style="color:red">bbb</option>
<option value='' style="color:blue">bbb</option>
<option value='' style="color:black">bbb</option>
<option value='' style="color:orange">bbb</option>
</select> 
<form action="cache/bb" method="post" >

	姓名：<input type="text" name="name" />
	电话：<input type="text" name="moblie" />
	<input type="submit" />
</form>

        <script type="text/javascript" src="static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="static/js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo1').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>
<div class="container demo">
<div style="float: left; width: 50%;">
  <p class="instructions">
    Click and drag on the image to select an area. 
  </p>

  <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
    <img id="photo1" style="width: 300px; height: 300px;" src="static/image/timg.jpg" />
  </div>
</div>

<div style="float: left; width: 50%;">
  <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
    Selection Preview
  </p>

<div class="frame" 
    style="margin: 0 1em; width: 100px; height: 100px;">
    <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
      <img src="static/image/timg.jpg" style="width: 100px; height: 100px;" />
    </div>
  </div>

  <table style="margin-top: 1em;">
    <thead>
      <tr>
        <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
          Coordinates
        </th>
        <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
          Dimensions
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
		      <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
		      <td style="width: 20%;"><b>Width:</b></td>
 		    <td><input type="text" value="-" id="w" /></td>
      </tr>
      <tr>
        <td><b>Y<sub>1</sub>:</b></td>
        <td><input type="text" id="y1" value="-" /></td>
        <td><b>Height:</b></td>
        <td><input type="text" id="h" value="-" /></td>
      </tr>
      <tr>
        <td><b>X<sub>2</sub>:</b></td>
        <td><input type="text" id="x2" value="-" /></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><b>Y<sub>2</sub>:</b></td>
        <td><input type="text" id="y2" value="-" /></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
</div>

  </body>
</html>
